<template>
  <div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="/img/h_banner2.jpg" alt="" />
      </div>
      <div class="swiper-slide">
        <img src="/img/h_banner1.jpg" alt="" />
      </div>
      <div class="swiper-slide">
        <img src="/img/h_banner3.jpg" alt="" />
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev my-navig"></div>
    <div class="swiper-button-next my-navig"></div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'

export default {
  mounted() {
    new Swiper('.swiper', {
      loop: true, // 循环模式选项,
      autoplay: true,
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
        // 可点击切换
        clickable: true
      },
      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
      }
    })
  }
}

// 对轮播图的上一页下一页的按钮效果进行调整
// 获取这两个按钮
// let next = document.querySelector('.swiper-button-next')
// let prev = document.querySelector('.swiper-button-prev')
</script>

<style lang="less" scoped>
.swiper {
  --swiper-theme-color: #e8390c;
  position: relative;
  overflow: hidden;
}
.swiper img {
  width: 100%;
}
.my-navig {
  opacity: 0.4;
}
.my-navig-movein {
  opacity: 1;
}
</style>
